<template>
	<view class="container">
		<view class="title">
			<view class="pinyin">{{ list.pinyin }} </view>
			<view>{{ list.chinese }} </view>
		</view>
		<view class="section">
			<view class="item">
				<view class="fw-bold">解释</view>
				<text>{{ list.definition }}</text>
				<view v-if="list.synonym || list.opposite">
					<text v-if="list.synonym" style="margin-right: 8px">
						{{ `[近]  ${list.synonym}` }}
					</text>
					<text v-if="list.opposite">{{ `[反]  ${list.opposite}` }}</text>
				</view>
			</view>
			<view class="item">
				<view class="fw-bold">金句</view>
				<view
					class="paragraph-container"
					v-for="(item, key) in options"
					:key="key"
				>
					<rich-text
						class="example"
						:nodes="highlightText(item, list.chinese)"
					/>
				</view>
			</view>
		</view>
		<view class="button">
			<text class="button-text">
				<slot />
			</text>
		</view>
	</view>
</template>

<script setup lang="ts">
import { computed } from "vue";
import type { Thesaurus } from "@/type/index.d";

type Props = { list: Thesaurus };

// 使用 withDefaults 设置默认值
const props = withDefaults(defineProps<Props>(), {
	list: () => ({
		chinese: "",
		pinyin: "",
		definition: "",
		synonym: "",
		opposite: "",
		example: "",
	}),
});

const highlightText = (text?: string, keyword?: string) => {
	if (!keyword) return "";
	return (
		text?.replaceAll(
			keyword,
			`<span style='color: rgb(226, 97, 41); font-weight: bold;'>${keyword}</span>`
		) || ""
	);
};
const options = computed(() => {
	const val = list.value.example?.split("\n") ?? [];
	return val;
});
const list = computed(() => props.list);
</script>

<style scoped lang="scss">
.root-container {
	height: 100vh;
	width: 100vw;
	padding: 20px;
	background: linear-gradient(130deg, #f7f9fd 0%, #edf4fc 100%);
}
.container {
	background-color: $uni-bg-color;
	border-radius: 30px;
	font-size: $uni-font-size-base;
	box-shadow: 12px 11px 9px 0 rgba(183, 189, 213, 0.5);
	height: calc(100vh - 170px);
	display: flex;
	flex-direction: column;
}
.section {
	// height: calc(100vh - 400px);
	overflow-y: scroll;
	flex: 1;
}
.title {
	height: 100px;
	font-size: 30px;
	background-color: $uni-color-primary;
	text-align: center;
	color: $uni-text-color-inverse;
	margin-bottom: 12px;
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	.pinyin {
		font-size: 18px;
	}
}
.button {
	display: flex;
	justify-content: center;
	padding: 12px 0;
}
.button > .button-text {
	line-height: 44px;
	padding: 0 15px;
	background-color: $uni-color-primary;
	border-radius: 8px;
	color: $uni-text-color-inverse;
	width: 90px;
	text-align: center;
}
.item {
	padding-left: 12px;
	padding-right: 12px;
	margin-bottom: 12px;
	line-height: 30px;
}
.fw-bold {
	font-weight: bold;
	font-size: $uni-font-size-lg;
	padding: 4px 0;
}
.example {
	line-height: 30px;
	white-space: break-spaces;
}
.paragraph-container {
	text-indent: 20px;
	&:nth-of-type(n + 2) {
		margin-top: 6px;
	}
}
</style>
